<template>
    <div class="home_container">
        <TopHeader />
        <!-- 首页轮播 -->
        <el-carousel height="400px" class="home_banner">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <img class="bannerImgStyle" :src="item" />
            </el-carousel-item>
        </el-carousel>
        <!-- 轮播END -->

        

        <!-- 分类 -->
        <div class="classification_container">
            <div class="classification">
                <div class="more">
                    <div>
                        <i class="el-icon-right"></i>
                        <p>分类</p>
                    </div>
                </div>
                <div class="classification-item" v-for="(item, index) in categoryList" :key="index" @click="classFac(item.caid)">
                    <img style="" :src="item.img" />
                    <p style="">{{ item.title }}</p>
                </div>
            </div>
        </div>
        <!-- 分类End -->

        <!-- 商品列表 -->
        <GoodsList :list="goodsData"  />
        <!-- 商品列表End -->

        <Bottom />

    </div>

</template>

<script>
// 全局header
import TopHeader from "@/components/modules/header.vue"
//引入GoodsList组件
import GoodsList from "@/components/modules/GoodsList.vue"
//Bottom组件
import Bottom from '@/components/modules/bottom.vue'
// 引入Api
import { getCategory, getAllpro, getAllprotomore } from '@/utils/api/api.js';
export default {
    name: 'app',
    components: {
        TopHeader, GoodsList,Bottom
    },
    data() {
        return {
            bannerList: [
                'http://101.132.181.9:3000/public/imgs/cms_1.jpg',
                'http://101.132.181.9:3000/public/imgs/cms_2.jpg',
                'http://101.132.181.9:3000/public/imgs/cms_3.jpg',
                'http://101.132.181.9:3000/public/imgs/cms_4.jpg'

            ],
            categoryList: [],
            //子组件数据
            goodsData: []
        }
    },
    methods: {
        // 获取首页所需数据
        async index() {
            await getCategory().then(resp => {
                this.categoryList = resp.msg
                console.log(this.categoryList);
            }).catch(err => {
                console.log(err);
            })

            //获取所有商品
            await getAllpro().then(resp => {
                this.goodsData = resp.msg
                console.log(resp);
            }).catch(err => {
                console.log(err);
            })


        },
        //触底加载商品
        handleScroll() {
            let scrollTop = document.documentElement.scrollTop//滚动条在Y轴滚动过的高度
            let scrollHeight = document.documentElement.scrollHeight//滚动条的高度
            let clientHeight = document.documentElement.clientHeight//浏览器的可视高度
            if (scrollTop + clientHeight == scrollHeight) {
                //触底加载商品
                getAllprotomore().then(resp => {
                    console.log('更多');
                    console.log(resp);
                    this.goodsData = [this.goodsData, ...resp.msg]
                }).catch(err => {
                    console.log(err);
                })
            }
        },
        classFac(val){

            this.$router.push({
                path:'/goodsListMore',
                query:{
                   tabNum:val
                }
            })
        }



    },

    mounted() {
        //调用api
        this.index()
        //监听滚动条
        window.addEventListener("scroll", this.handleScroll())
    }
}
</script>

<style lang="scss" scoped>
@import "./home.scss"
</style>